<template>
	<view class="page-content">
		<f-navbar title="提交回执单" :navbarType="1"></f-navbar>
		<view class="form-block">
			<view class="item-form">
				<view class="item-label required">是否收油</view>
				<!-- isRecycleOil 0否1是 -->
				<view class="flex-sub padding-right-sm">
					<u-radio-group v-model="form.isRecycleOil">
						<u-radio :customStyle="{ marginRight: '15px' }" activeColor="#2C9F79" label="已收油" name="1">
						</u-radio>
						<u-radio activeColor="#2C9F79" label="未收油" name="0"> </u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="item-form" style="align-items: flex-start;" v-if="form.isRecycleOil == '0'">
				<view class="item-label required">备注</view>
				<view class="flex-sub padding-right-sm">
					<u--textarea border="none" v-model="form.remark" placeholder="请输入"></u--textarea>
				</view>
			</view>
			<template v-if="form.isRecycleOil == '1'">
				<!-- taskType 1 运输任务  0 收运任务 -->
				<!-- // this.pageData.startingStationType 0预处理厂1处理厂 （运输区分） -->
				<!-- "receivingVehicleType" //车辆类型  抽吸车 4 -->
				<!-- "transportationType"//运输类型  1收运  2运输 -->
				<!-- 运输订单 预处理厂 -->
				<template v-if="taskType == '1' && pageData.startingStationType == '0'">
					<view class="item-form">
						<view class="item-label required">处理油量</view>
						<view class="flex-sub padding-right-sm">
							<u-input border="none" color="#000000" fontSize="28rpx" placeholder="请输入"
								placeholderStyle="color:#666668;font-size:28rpx;" inputAlign="right" type="number"
								v-model="form.processingOil">
							</u-input>
						</view>
					</view>
					<view class="item-form">
						<view class="item-label required">处理后油量</view>
						<view class="flex-sub padding-right-sm">
							<u-input border="none" color="#000000" fontSize="28rpx" placeholder="请输入"
								placeholderStyle="color:#666668;font-size:28rpx;" inputAlign="right" type="number"
								v-model="form.processedOil">
							</u-input>
						</view>
					</view>
					<view class="item-form item-form-img">
						<view class="item-label required">照片（出厂磅头、入场磅头、回执单）</view>
						<view class="upload-img" style="margin-top: 32rpx;">
							<uploadList :num="1" v-model="img1" uploadTip="出厂磅头"></uploadList>
							<uploadList :num="1" v-model="img2" uploadTip="入场磅头"></uploadList>
							<uploadList :num="1" v-model="img3" uploadTip="回执单"></uploadList>
						</view>
					</view>
					<view class="item-form" style="align-items: flex-start;">
						<view class="item-label">运输问题反馈</view>
						<view class="flex-sub padding-right-sm">
							<u--textarea border="none" v-model="form.remark" placeholder="请输入"></u--textarea>
						</view>
					</view>
				</template>
				<!-- 运输订单 处理厂 -->
				<template v-if="taskType == '1' && pageData.startingStationType == '1'">
					<view class="item-form">
						<view class="item-label required">出厂总重量</view>
						<view class="flex-sub padding-right-sm">
							<u-input border="none" color="#000000" fontSize="28rpx" placeholder="请输入"
								placeholderStyle="color:#666668;font-size:28rpx;" inputAlign="right" type="number"
								v-model="form.appearanceTotalWeight">
							</u-input>
						</view>
					</view>
					<view class="item-form">
						<view class="item-label required">入场总重量</view>
						<view class="flex-sub padding-right-sm">
							<u-input border="none" color="#000000" fontSize="28rpx" placeholder="请输入"
								placeholderStyle="color:#666668;font-size:28rpx;" inputAlign="right" type="number"
								v-model="form.uponTotalWeight">
							</u-input>
						</view>
					</view>
					<view class="item-form">
						<view class="item-label required">车皮重量</view>
						<view class="flex-sub padding-right-sm">
							<u-input border="none" color="#000000" fontSize="28rpx" placeholder="请输入"
								placeholderStyle="color:#666668;font-size:28rpx;" inputAlign="right" type="number"
								v-model="form.carSkinWeight">
							</u-input>
						</view>
					</view>
					<view class="item-form">
						<!-- 入场-车皮 -->
						<view class="item-label ">净重量</view>
						<view class="flex-sub padding-right-sm">
							<u-input border="none" color="#000000" fontSize="28rpx" placeholder="请输入"
								placeholderStyle="color:#666668;font-size:28rpx;" inputAlign="right" type="number"
								:readonly="true" v-model="netWeightYs">
							</u-input>
						</view>
					</view>
					<view class="item-form item-form-img">
						<view class="item-label required">运输完毕反馈（出厂磅头、入场磅头、回执单）</view>
						<view class="upload-img" style="margin-top: 32rpx;">
							<uploadList :num="1" v-model="img1" uploadTip="出厂磅头"></uploadList>
							<uploadList :num="1" v-model="img2" uploadTip="入场磅头"></uploadList>
							<uploadList :num="1" v-model="img3" uploadTip="回执单"></uploadList>
						</view>
					</view>
					<view class="item-form" style="align-items: flex-start;">
						<view class="item-label">运输问题反馈</view>
						<view class="flex-sub padding-right-sm">
							<u--textarea border="none" v-model="form.remark" placeholder="请输入"></u--textarea>
						</view>
					</view>
				</template>

				<!-- 收运订单 收运 清掏(专项作业车类型) 车辆类型是多选-->
				<template v-if="taskType == '0' && detalisData.receivingVehicleType != '4'">
					<view class="item-form">
						<view class="item-label required">桶数</view>
						<view class="flex-sub padding-right-sm">
							<u-input border="none" color="#000000" fontSize="28rpx" placeholder="请输入"
								placeholderStyle="color:#666668;font-size:28rpx;" inputAlign="right" type="number"
								v-model="form.barrelage">
							</u-input>
						</view>
					</view>
					<view class="item-form">
						<view class="item-label required">称重数据</view>
						<view class="flex-sub padding-right-sm" style="text-align: right;">
							<view class="" v-for="(item, index) in detalisData.oilList">
								{{ item.oilName }} : {{ item.actualWeight || 0 }}kg
							</view>
							<view class="">(称重数据回显)</view>
						</view>
					</view>
					<view class="item-form item-form-img">
						<view class="item-label required">收运完毕反馈（三联单、门头、桶位）</view>
						<view class="upload-img" style="">
							<uploadList :num="1" v-model="img1" uploadTip="三联单"></uploadList>
							<uploadList :num="1" v-model="img2" uploadTip="门头"></uploadList>
							<uploadList :num="1" v-model="img3" uploadTip="桶位"></uploadList>
						</view>
					</view>
					<view class="item-form" style="align-items: flex-start;">
						<view class="item-label">收运问题反馈</view>
						<view class="flex-sub padding-right-sm">
							<u--textarea border="none" v-model="form.remark" placeholder="请输入"></u--textarea>
						</view>
					</view>
				</template>
				<!-- 收运订单 清掏(抽吸车类型) 车辆类型是多选--> 
				<template v-if="taskType == '0' && detalisData.receivingVehicleType == '4'">
					<view class="item-form">
						<view class="item-label required">出厂重量</view>
						<view class="flex-sub padding-right-sm">
							<u-input border="none" color="#000000" fontSize="28rpx" placeholder="请输入"
								placeholderStyle="color:#666668;font-size:28rpx;" inputAlign="right" type="number"
								v-model="form.appearanceTotalWeight">
							</u-input>
						</view>
					</view>
					<view class="item-form">
						<view class="item-label required">进场重量</view>
						<view class="flex-sub padding-right-sm">
							<u-input border="none" color="#000000" fontSize="28rpx" placeholder="请输入"
								placeholderStyle="color:#666668;font-size:28rpx;" inputAlign="right" type="number"
								v-model="form.uponTotalWeight">
							</u-input>
						</view>
					</view>
					<view class="item-form">
						<!-- 进 -  出 -->
						<view class="item-label required">净重</view>
						<view class="flex-sub padding-right-sm">
							<u-input border="none" color="#000000" fontSize="28rpx" placeholder="自动计算"
								placeholderStyle="color:#666668;font-size:28rpx;" inputAlign="right" type="number"
								:readonly="true" v-model="netWeight">
							</u-input>
						</view>
					</view>
					<view class="item-form item-form-img">
						<view class="item-label required">收运完毕反馈（三联单、出厂磅头、进厂磅头）</view>
						<view class="upload-img" style="margin-top: 32rpx;">
							<uploadList :num="1" v-model="img1" uploadTip="三联单"></uploadList>
							<uploadList :num="1" v-model="img2" uploadTip="出厂磅头"></uploadList>
							<uploadList :num="1" v-model="img3" uploadTip="进厂磅头"></uploadList>
						</view>
					</view>
					<view class="item-form" style="align-items: flex-start;">
						<view class="item-label">收运问题反馈</view>
						<view class="flex-sub padding-right-sm">
							<u--textarea border="none" v-model="form.remark" placeholder="请输入"></u--textarea>
						</view>
					</view>
				</template>

			</template>

			<view class="login-btn">
				<u-button color="linear-gradient(83deg, #48B453 0%, #2C9F79 100%)"
					:customStyle="{ width: '635rpx', height: '83rpx', fontSize: '34rpx', borderRadius: '50rpx', fontWeight: 'bold' }"
					@click="submitForm">确认
				</u-button>
			</view>

		</view>
	</view>
</template>
<script>
import {
	submitRecyclingForm,
	orderDetail,
	orderOilDetail
} from "@/api/task.js"
import uploadList from "@/components/upload/list.vue"
export default {
	components: {
		uploadList
	},
	data() {
		return {
			pageData: {},
			detalisData: [],
			form: {
				isRecycleOil: '1', //  0否1是
				// taskId: 1, //任务id
				// orderId: 1, //订单id
				type: 1, //1预处理从2处理厂3收油专项作业车4清掏抽吸车
				// photo: "", //反馈照片
				//预处理
				processingOil: "", //处理油量
				processedOil: "", //处理后油量
				//处理厂
				appearanceTotalWeight: "", //出场总重量
				uponTotalWeight: "", //入场总重量
				carSkinWeight: "", //车皮重量
				netWeight: "", //净重
				// 作业车
				barrelage: "", //桶数
				// weightData: '', //称重数据
				// 抽吸车 同处理厂的数据
				remark: "" //反馈内容
			},
			imgs: [],
			img1: [],
			img2: [],
			img3: [],
			taskType: '',
		};
	},
	computed: {
		netWeight() {
			let weight = this.form.uponTotalWeight - this.form.appearanceTotalWeight
			this.form.netWeight = weight
			return weight
		},
		netWeightYs() {
			let weight = this.form.uponTotalWeight - this.form.carSkinWeight
			this.form.netWeight = weight
			return weight
		},
	},
	onReady() {

	},
	onShow() {

	},
	onLoad(option) {
		console.log(option);
		// taskType 0收运 1运输
		this.pageData = option
		this.taskType = option.taskType
		if (this.taskType == '0') {
			this.orderOilDetail()
		}
	},
	onHide() {

	},
	methods: {
		orderOilDetail() {
			// this.pageData.startingStationType 0预处理厂1处理厂 （运输区分）	
			orderOilDetail(this.pageData).then(res => {
				this.detalisData = res.data
			})
		},
		imageValidate(name, name1, name2) {
			if (this.form.isRecycleOil == '1') {
				if (!this.img1.length) {
					uni.$u.toast(`请上传${name}`)
					throw new Error(`请上传${name}`);
				}
				if (!this.img2.length) {
					uni.$u.toast(`请上传${name1}`)
					throw new Error(`请上传${name1}`);
				}
				if (!this.img3.length) {
					uni.$u.toast(`请上传${name2}`)
					throw new Error(`请上传${name2}`);
				}
			}
		},
		submitForm() {
			if (this.form.isRecycleOil == '') {
				uni.$u.toast('请您选择是否收油');
				return false;
			}
			if (this.form.isRecycleOil == '0' && this.form.remark == '') {
				uni.$u.toast('请您输入未收油备注！');
				return false;
			}
			if(this.form.isRecycleOil == '1'){
				if (this.taskType == '1' && this.pageData.startingStationType == '0') {
					this.form.type = 1;
					if(this.form.processingOil == ''){
						uni.$u.toast('请输入处理油量');
						return false;
					}
					if(this.form.processedOil == ''){
						uni.$u.toast('请输入处理后油量');
						return false;
					}
					// if (this.imgs.length < 3 && this.form.isRecycleOil == '1') {
					// 	uni.$u.toast('请您上传出厂磅头、入场磅头、回执单的照片！');
					// 	return false;
					// }
					this.imageValidate('厂磅头', '入场磅头', '回执单')
				} else if (this.taskType == '1' && this.pageData.startingStationType == '1') {
					this.form.type = 2
					if(this.form.appearanceTotalWeight == ''){
						uni.$u.toast('请输入出厂总重量');
						return false;
					}
					if(this.form.uponTotalWeight == ''){
						uni.$u.toast('请输入入场总重量');
						return false;
					}
					if(this.form.carSkinWeight == ''){
						uni.$u.toast('请输入车皮重量');
						return false;
					}
					// if (this.imgs.length < 3 && this.form.isRecycleOil == '1') {
					// 	uni.$u.toast('请您上传出厂磅头、入场磅头、回执单的照片！');
					// 	return false;
					// }
					this.imageValidate('厂磅头', '入场磅头', '回执单')
				} else if (this.taskType == '0' && this.detalisData.receivingVehicleType != '4') {
					this.form.type = 3
					if(this.form.barrelage == ''){
						uni.$u.toast('请输入桶数');
						return false;
					}
					// if (this.imgs.length < 3 && this.form.isRecycleOil == '1') {
					// 	uni.$u.toast('请您上传出三联单、门头、桶位的照片！');
					// 	return false;
					// }
					this.imageValidate('三联单', '门头', '桶位')
				} else if (this.taskType == '0' && this.detalisData.receivingVehicleType == '4') {
					this.form.type = 4
					if(this.form.appearanceTotalWeight == ''){
						uni.$u.toast('请输入出场重量');
						return false;
					}
					if(this. form.uponTotalWeight == ''){
						uni.$u.toast('请输入进场重量');
						return false;
					}
					// if (this.imgs.length < 3 && this.form.isRecycleOil == '1') {
					// 	uni.$u.toast('请您上传三联单、出厂磅头、进厂磅头的照片！');
					// 	return false;
					// }
					this.imageValidate('三联单', '出厂磅头', '进厂磅头')
				}
			}
			
			// if (this.imgs.length == 0) {
			// 	uni.$u.toast('请上传单据');
			// 	return false;
			// }
			submitRecyclingForm({
				...this.pageData,
				...this.form,
				photo: [...this.img1, ...this.img2, ...this.img3].join(),
				weightData: JSON.stringify(this.detalisData.oilList)
			}).then((res) => {
				uni.$u.toast('提交成功');
				this.goLink('', 'back')
			})
		}
	},
};
</script>
<style lang="scss" scoped>
/deep/.input-placeholder {
	color: #666668 !important;
	font-size: 28rpx;
	text-align: right;
}

::v-deep .img-block {
	grid-gap: 0px
}

.page-content {
	height: 100vh;
	display: flex;
	flex-direction: column;

	.upload-img {
		margin-top: 30rpx;
		display: flex;
	}

	.form-block {
		flex: 1;
		margin-top: 32rpx;
		padding: 0 32rpx;
		background: #ffffff;
		padding-bottom: 50rpx;

		.item-form {
			padding: 32rpx 0;
			border-bottom: 1rpx solid #EFEFEF;
			display: flex;
			align-items: center;

			&.item-form-img {
				display: block;
			}

			.item-label {
				font-size: 30rpx;
				color: #000000;
				margin-right: 32rpx;

				&.required:before {
					content: "*";
					color: #DF0E0E;
					font-size: 32rpx;
					margin-right: 3rpx;
				}
			}

			.item-value {
				white-space: nowrap;
				width: 520rpx;

				.item-tag {
					display: inline-block;
					height: 64rpx;
					background: #F7F7F7;
					border-radius: 50rpx;
					padding: 0 20rpx;
					min-width: 152rpx;
					background: #F7F7F7;
					color: #000000;
					border: 2rpx solid #F7F7F7;
					line-height: 64rpx;
					margin-right: 26rpx;
					text-align: center;

					&.active {
						border-color: #138E57;
						color: #138E57;
					}
				}
			}

			::v-deep.u-textarea {
				padding: 0;
			}
		}


		.login-btn {
			margin-top: 88rpx;
		}

	}
}
</style>